<template>
  <div :class="className" :style="{height:height,width:width}" />
</template>

<script>
  import echarts from 'echarts'
  require('echarts/theme/macarons') // echarts theme
  import resize from './resize'

  export default {
    mixins: [resize],
    props: {
      className: {
        type: String,
        default: 'chart'
      },
      width: {
        type: String,
        default: '100%'
      },
      height: {
        type: String,
        default: '100%'
      },
      autoResize: {
        type: Boolean,
        default: true
      }
    },
    data() {
      return {
        chart: null,
        myData: [9, 15, 5, 3, 0],
        myColor: ['#fff100'],
        num: null
      }
    },
    mounted() {
      this.$nextTick(() => {
        this.initChart()
      })
    },
    beforeDestroy() {
      if (!this.chart) {
        return
      }
      this.chart.dispose()
      this.chart = null
    },
    methods: {
      initChart() {
        this.chart = echarts.init(this.$el, 'macarons')
        this.chart.setOption({
          backgroundColor: '#101e44', // 背景色
          grid: {
            left: '5%',
            top: '12%',
            right: '10%',
            bottom: '5%',
            containLabel: true
          },
          tooltip: {
            trigger: 'axis',
            axisPointer: {
              type: 'shadow'
            },
            formatter: function(params) {
              let res = '<div><p>类型：' + params[0].name + '</p></div>'
              res += '<p>总数:' + (params[2].data - 0.5) + '个</p>'
              res += '<p>' + params[0].seriesName + ':' + params[0].data + '个</p>'
              res += '<p>' + params[2].seriesName + ':' + (params[2].data - params[0].data - 0.5) + '个</p>'
              return res
            }
          },
          xAxis: [{
            show: false
          }],
          yAxis: [{
            axisTick: 'none',
            axisLine: 'none',
            offset: '10',
            axisLabel: {
              textStyle: {
                color: '#ffffff',
                fontSize: '16'
              }
            },
            inverse: true, // 让y轴数据逆向
            data: ['温度', '应力', '振动', '倾斜', '声发射']
          }, {
            axisTick: 'none',
            axisLine: 'none',
            axisLabel: {
            },
            data: ['10', '16', '5', '5', '0']
          }, {
            // name: '单位：件',
            // nameGap: '50',
            // nameTextStyle: {
            //     color: '#ffffff',
            //     fontSize: '16',
            // },
            axisLine: {
              lineStyle: {
                color: 'rgba(0,0,0,0)'
              }
            },
            data: []
          }],
          series: [{
            name: '在线',
            type: 'bar',
            yAxisIndex: 0,
            // data: [232, 212, 124, 102, 42],
            data: this.myData,
            label: {
              normal: {
                // show: true,
                show: false,
                position: 'right',
                formatter: function(param) {
                  return param.value
                },
                textStyle: {
                  color: '#ffffff',
                  fontSize: '16'
                }
              }
            },
            barWidth: 12,
            itemStyle: {
              normal: {
                // color: function(params) {
                //     var num = myColor.length;
                //     return myColor[params.dataIndex % num]
                // },
                color: '#fff100'
              }
            },
            z: 2
          }, {
            name: '离线',
            type: 'bar',
            yAxisIndex: 1,
            barGap: '-100%',
            data: [0.5, 5.5, 5.5, 16.5, 10.5],
            barWidth: 20,
            itemStyle: {
              normal: {
                color: '#0e2147',
                barBorderRadius: 5
              }
            },
            z: 1
          }, {
            name: '外框',
            type: 'bar',
            yAxisIndex: 2,
            barGap: '-100%',
            data: [20, 20, 20, 20, 20],
            barWidth: 22,
            itemStyle: {
              normal: {
                // color: function(params) {
                //         var num=myColor.length;
                //         return myColor[params.dataIndex%num]
                // },
                color: '#2c5eb9',
                barBorderRadius: 5
              }
            },
            z: 0
          },
          // {
          //   name: '外圆',
          //   type: 'scatter',
          //   hoverAnimation: false,
          //   data: [0, 0, 0, 0, 0],
          //   yAxisIndex: 2,
          //   symbolSize: 35,
          //   itemStyle: {
          //     normal: {
          //       color: '#fff100',
          //       opacity: 1
          //     }
          //   },
          //   z: 2
          // },
          {
            name: '内圆',
            type: 'scatter',
            stack: '圆',
            yAxisIndex: 0,
            data: this.myData,
            symbolSize: 14,
            itemStyle: {
              normal: {
                borderColor: '#fff',
                borderWidth: 3,
                color: '#fff100',
                opacity: 1
              }
            },
            z: 2
          }
          ]
        }
        )
      }
    }
  }
</script>

<style scoped>

</style>
